<template>
  <div>
    <div class="search_form">
			<div>
				<el-date-picker
					size="mini"
					v-model="searchForm.workDate"
					type="date"
					format="yyyy年MM月dd日"
					value-format="yyyy-MM-dd"
					placeholder="选择日期"
					class="others"
          clearable
				></el-date-picker>
        <el-select
					size="mini"
					clearable
					placeholder="请选择班次"
					v-model="searchForm.workTime"
					class="others"
					popper-class="selectClass"
				>
					<el-option v-for="(item, index) in workTimeList" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
				</el-select>
				<el-button @click="searchData" class="search_btn" type="primary" icon="el-icon-search" size="mini">
					查询
				</el-button>
			</div>
      <div>
        <el-button type="primary" v-hasPermi="['dispatchManagement:TDisWorkPlan:addPort']" icon="el-icon-plus" @click="applyOddJob" size="mini">集疏港申请</el-button>
        <!-- <el-button type="primary" @click="editClick" size="mini">申请编辑</el-button> -->
        <el-button type="primary" v-hasPermi="['dispatchManagement:TDisWorkPlan:deletePort']" icon="el-icon-delete" @click="deletehandlderClick" size="mini">删除</el-button>
      </div>
		</div>
    <BaseTableCheck 
      ref="oddJobApply"
      :loading="loading"
      :data="tableData"
      :columns="columns" 
      :tableHT="tableHeight" 
      :pagination="false"
      @checkId="workTaskSelChange"></BaseTableCheck>
    <!-- 零工申请 -->
    <el-drawer title="集疏港申请" :visible.sync="isShow" size="50%">
      <div v-if="isShow">
        <detailPage :addSuccess="addSuccess" :oddform="oddform"></detailPage>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import api from '@/api/Product/oddJobApply/index'
import apiport from '@/api/yardTally/openPortApply/index'
import BaseTableCheck from '@/components/BaseTable/baseTablecheck'
import publicapi from '@/api/public/index'
import detailPage from './subPage/index'
export default {
  components: { BaseTableCheck, detailPage },
  data () {
    return{
      searchForm: {
        workDate: '',
        workTime: '01',
      },
      workTimeList: [], // 班次
      loading: false,
      tableData: [],
      columns: [
        {
          prop: 'planNo',
          label: '编号',
          width: 150
        },
        {
          prop: 'processName',
          label: '作业过程',
        },
        {
          prop: 'cargoCategoryName',
          label: '货种'
        },
        {
          prop: 'storehouseNameSource',
          label: '起始区域',
        },
        {
          prop: 'storehouseNameTarget',
          label: '终点区域',
        },
        {
          prop: 'tallyBack',
          label: '机械',
          width: 120
        },
        {
          prop: 'laborDispatch',
          label: '劳务',
        },
        {
          prop: 'nameVoyage',
          label: '船名航次',
          width: 120
        },
        {
          prop: 'remark',
          label: '备注',
        },
        {
          prop: 'approvalStatus',
          label: '状态',
          render(h,params) {
            if (params.row.approvalStatus == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '未审核'
                }
              })
            } else if (params.row.approvalStatus == '2') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已审核'
                }
              })
            }
          }
        },
      ],
      tableHeight: window.innerHeight - 160,
      checkTableData: [], // 复选框选择中的值
      isShow: false,
      oddform: {},
      menuArr: [],
    }
  },
  activated() {
    var menuArr = []
    var menuId = ''
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'))
    }
    menuArr.map(item => {
      item.children.map(v => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id
        }
      })
    })
    if (menuId) {
      this.menuArr = []
      publicapi.getPermissionsBtn(menuId)
        .then(res => {
          res.data.data.map(item => {
            this.menuArr.push(item.RESOURCENAME)
          })
        }).catch((error) => {})
    }
    this.getDictData()
    // this.searchData()
  },
  created () {
    //  日期默认当天
		let date = new Date()
		let theYear = date.getFullYear() //获取完整的年份(4位)
		let theMonth = date.getMonth() + 1 //获取当前月份(1-12,1代表1月)
		theMonth = theMonth >= 10 ? theMonth : "0" + theMonth
		let theDay = date.getDate() //获取当前日(1-31)
		theDay = theDay >= 10 ? theDay : "0" + theDay
    this.searchForm.workDate = theYear+'-'+theMonth+'-'+theDay
  },
  methods: {
    // 查询字典信息
    getDictData () {
      publicapi.getDictData('SCHEDULE').then(res => {
        this.workTimeList = res.data.data.SCHEDULE
      })
    },
    // 查询
    searchData () {
      this.$refs.oddJobApply.clearSelection()
      this.loading = true
      let params = Object.assign({},this.searchForm)
      apiport.queryPort(params).then(res => {
        if (res.data.code != '0000') {
          this.$message.error(res.data.msg)
          return
        }
        this.loading = false
        this.tableData = res.data.data
      })
    },
    // 选中的复选框
    workTaskSelChange (val) {
      console.log(val)
      this.checkTableData = val
    },
    // 零工申请
    applyOddJob () {
      this.oddform = {}
      this.isShow = true
    },
    // 删除
    deletehandlderClick () {
      if (this.checkTableData && this.checkTableData.length == 0) {
        return this.$message.warning('请先选择一条数据')
      }
      if (this.checkTableData && this.checkTableData.length > 1) {
        return this.$message.warning('只能删除一条数据')
      }
      this.$confirm('将删除此数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          apiport.deletePort(this.checkTableData[0].id).then(res => {
            if (res.data.code != '0000') {
              return this.$message.error(res.data.msg)
            }
            this.searchData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 成功后操作
    addSuccess () {
      this.searchData()
      this.isShow = false
    },
    // 编辑
    editClick () {
      if (this.checkTableData && this.checkTableData.length == 0) {
        return this.$message.warning('请先选择一条数据')
      }
      if (this.checkTableData && this.checkTableData.length > 1) {
        return this.$message.warning('只能编辑一条数据')
      }
      this.oddform = this.checkTableData[0]
      this.isShow = true
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../../assets/searchfrom.less";
/deep/ .el-drawer__header {
  margin-bottom: 1px;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}
/deep/ .el-drawer__body {
  overflow-y: auto;
  margin-bottom: 50px;
}
/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
  z-index: 20;
}
</style>